<template>
  <div>
<el-form ref="form" :model="form" label-width="80px" style="margin-left:80px" :rules="rules"  >
  <el-form-item label="节点名称" prop="name">
    <el-input v-model="form.name" style="width:200px"></el-input>
  </el-form-item>
   <el-form-item label="选择部门">
    <el-cascader :options="list"  @change="d" :props="props"  v-model="form.parent_id" clearable style="width:200px" placeholder="不选择默认为最高级"></el-cascader>
  </el-form-item>
  <el-form-item label="添加人名称" label-width="95px" prop="user" style="margin-left:-15px">
    <el-input v-model="form.user"  style="width:200px"></el-input>
  </el-form-item>
  <el-form-item label="添加人手机号"  label-width="110px" style="margin-left:-28px" prop="user_mobile">
    <el-input v-model.number="form.user_mobile"  style="width:200px"></el-input>
  </el-form-item>
  <el-form-item label="openid"  label-width="110px" style="margin-left:-28px" prop="openid">
    <el-input v-model.number="form.openid"  style="width:200px"></el-input>
  </el-form-item>
  <el-form-item >
    <el-button @click="on"  style="margin-left:150px">取消</el-button>
    <el-button type="primary" @click="add('form')">添加</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
export default {
    props:['fit'],
    data(){
        var validatorPhone = (rule,value,callback) =>{
            if(value == ''){
                callback(new Error('手机号不能为空'))
            }else{
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                if(!reg.test(value)){
                    callback(new Error('请输入正确的手机号'))
                }
            }
        }
        return{
            its:'',
            token:'',
            list:[],
            id:0,
            form: {
                name: '',
                parent_id:null,
                user:'',
                user_mobile:'',
                openid: null
            },
           props: { value: "id", label: "name", children:'son',emitPath:false,checkStrictly:true},
           rules:{
               name:[
                    { required: true, message: '请输入节点名称', trigger: 'blur' },
                    { min: 1, max: 10, message: '节点名称在 1 到 10 个字符', trigger: 'blur' }
               ],
               user:[
                    { required: true, message: '请输入添加人名称', trigger: 'blur' },
                    { min: 1, max: 5, message: '添加人名称在 1 到 5 个字符', trigger: 'blur' }
               ],
               user_mobile:[
                    { validator: validatorPhone , trigger: 'blur' },
               ]
           }
        }
    },
    methods:{
      d(e){
        this.its = e
      },
        gelist(){
          this.$axios.get('http://121.42.230.80/api/visit/department/list',{
            headers:{
              Authorization:this.token
            }
          }).then((res)=>{
                this.list = this.getdlist(res.data.data)
          })
        },
        getdlist(data){
          for(var i = 0; i < data.length; i++){
            if(data[i].son.length < 1){
                data[i].son = undefined
            }else{
              this.getdlist(data[i].son)
            }
          }
          return data
        },
        on(){
            this.$emit('ol',false)
            this.form = {}
        },
          add(name){
              this.$refs[name].validate((valid) => {
                if (valid) {
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
            const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
            if(!reg.test(this.form.user_mobile)){
              this.$message.error('手机号格式不对')
              return
            }
            let from = this.form
              if(this.form.parent_id == null){
                this.form.parent_id = 0
                this.$axios.post('http://121.42.230.80/api/visit/department/add',from,{
                    headers:{
                      Authorization:this.token
                    }

                }).then((res)=>{
                  if(res.data.code == '00000'){
                      this.$message.success('添加成功')
                      this.$emit('ol',false)
                  }else{
                    this.$message.error('添加失败')
                  }
                })
            }else{
                 this.$axios.post('http://121.42.230.80/api/visit/department/add',from,{
                   headers:{
                      Authorization:this.token
                   },
                 }).then((res)=>{
                   if(res.data.code == '00000'){
                      this.$message.success('添加成功')
                     this.$emit('ol',false)
                   }else{
                     this.$message.error('添加失败')
                   }
                 })
                this.form.parent_id = null
                this.form.name = ''
                this.form.user = ''
                this.form.user_mobile = ''
                this.form.openid = ''
            }
            }
    },
    created(){
      this.token = sessionStorage.getItem('token')
      this.gelist()
      this.form = this.fit
    },
}
</script>

<style scoped>

</style>